<template>
	<view>
		<view class="hot-activity-body" @click="onClick()">
			<view class="hot-ranking" >
				<view class="ranking-content"
				:style="{
					 backgroundColor:ranking==1? '#EF4F4A'
									:ranking==2? '#FD930D'
									:ranking==3? '#F0C174':'#56CDBA'
				}"
				>
					<view  class="ranking-text">
						{{ranking}}
					</view>
					<!-- 辅助视图生成样式 -->
					<view class="ranking-assist"
					:style="{
						borderTop: ranking==1? '8rpx solid #EF4F4A'
									:ranking==2? '8rpx solid #FD930D'
									:ranking==3? '8rpx solid #F0C174':'8rpx solid #56CDBA',
						borderRight: '15rpx solid transparent'
					}"
					/>
				</view>                                                                                                                           
			</view>
			<view class="hot-activity-content">
				<view class="hot-activity-info">
					<view class="hot-activity-text-content">
						<view class="text-info">{{articleText}}</view>
						<view class="hot-activity-footer">
							<text>{{hot}} 热度</text>
						</view>
					</view>
					<view v-if="hotPic" >
						<view v-if="isVideo" class="hot-activity-image">
							<image :lazy-load="true" mode="aspectFill"  :src="hotPic+'?vframe/jpg/offset/0'"
								class="image-item" />
							<view  class="play-icon-content">
								<uni-icons customPrefix="customicons" type="videocam-filled" color="#c5c5c5dc"
									size="30" />
							</view>
						</view>
						<view v-else class="hot-activity-image">
							<image class="image-item" :lazy-load="true" mode="aspectFill" :src="hotPic"  />
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * hotActivityItem 热门动态/问题的单个组件
	 * @description 热门动态/问题的单个组件
	 * @Author: 穆兰
	 * @Date: 2022/1/7
	 * @LastEditors: 穆兰
	 * @LastEditTime: 2022/2/18
	 * @property {Number} hotNumber    - 热门指数
	 * @property {String} hotText - 文字内容
	 * @property {String} hotPic - 图片内容
	 * @property {Boolean} isVideo -是否为视频
	 * @property {Number} ranking -排名
	 * @event {Function} onClick 点击此组件
	 */
	export default {
		name:"hot-activity-item",
		props: {
			hotNumber:{
				type:Number,
				required:true
			},
			hotText:{
				type:String,
				required:true
			},
			hotPic:{
				type:String,
				required:true
			},
			isVideo:{
				type:Boolean,
				default:false
			},
			ranking:{
				type:Number,
				required:true
			},
			},
		data() {
			return {
				articleText:''
				
				};
			},
		computed:{
			hot(){
				let hot = this.hotNumber
				let hotText = hot
				if(hot>1000){
					hotText = hot/1000 +'k'
				}
				return hotText
			}
		},
		emits:['onClick'],
		beforeMount(){
			this.initText()
		},
		methods:{
			/**
			 * @description 点击主体
			 */
			onClick(){
				this.$emit('onClick')
			},
			/**
			 * @description 初始化文字格式
			 */
			initText() {
				let text = this.hotText
				let maxLength = 100
				//一个换成换算成20个字符串，最后只能有100个字符位，多了就要收起
				let line_breaks = 0
				let transformTextLength =0
				let textMatch = text.match(/\n/ig)
				if (textMatch) {
					line_breaks = textMatch.length
				}
				if (line_breaks <= 0) {
					transformTextLength = text.length
				} else {
					transformTextLength = text.length + line_breaks * 19
					if (transformTextLength > 50) {
						let times = 1
						let first_break = text.indexOf('\n')
						let temp_break = first_break //临时长度 将一个换行换成20长度
						let real_break = first_break //真实长度，一个换行为一个长度
						let temp_text = text
						while (temp_break < 50) {
							temp_text = text.slice(real_break + 1)
							if (temp_text.indexOf('\n') == -1) {
								break
							}
							temp_break = temp_break + 20 + temp_text.indexOf('\n')
							real_break = real_break + 1 + temp_text.indexOf('\n')
							times = times + 1
						}
						maxLength = real_break
					}
				}
				let showAll = transformTextLength <= 50 //换算后的文字长度小于100则转换成真实长度
				if(showAll){
					this.articleText =  this.hotText
				}else{
					this.articleText =  this.hotText.slice(0, maxLength) + '...'
				}
		}
		}
	}
</script>

<style scoped lang="scss">
	.hot-activity-body{
		margin: 2rpx 0;
		padding: 30rpx 4%;
		display: flex;
		background-color: #FFFFFF;
		
		
	}
	.hot-ranking{

		width: 8%;
		text-align: center;
		font-size: smaller;
		color: #FFFFFF;
		position: relative;
		.ranking-content{
			margin-top: 7rpx;
			height: 38rpx;
			width: 28rpx;
			font-size: 20rpx;
			display: flex;
			border-radius: 5rpx;
			align-items: center;
			justify-content: center;
			text-align: center;
			z-index: 99;
		}
		.ranking-assist{
			width: 0;
			height: 0;
			content: '';
			position: absolute;
			top: 44rpx;
			
			z-index: 98;
		}
	}
	.hot-activity-content{

		font-size: medium;
		color: #000000;
		width: 92%;
		font-weight: 700;
		position: relative;
		
		.hot-activity-info{
			display: flex;
			.hot-activity-text-content{
				flex-grow: 1;
				text-align: left;
				display: flex;
				flex-direction: column;
				min-height: 130rpx;

				
				.text-info{
					flex-grow: 1;
				}
			}
			.hot-activity-image{
				margin-left: 20rpx;
				height: 120rpx;
				width: 170rpx;
				border-radius: 5rpx;
				overflow: hidden;
				position: relative;
			}
			.image-item{
				height: 120rpx;
				width: 170rpx;
				background-color: #aaaaaa;
				
			}
			.play-icon-content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-15px) translateY(-15px);
			
			}
		}
		.hot-activity-footer{
			margin-top: 20rpx;
			display: flex;
			align-items: left;
			color: #d7d7d7;
			font-size: 20rpx;
			font-weight: lighter;
		}
	}
</style>
